<template>
  <div class="past-due">
    <van-nav-bar
      class="past-bar"
      left-arrow
      :title="active === 1 ? '待签文件' : '安全签文件 就用盛E签'"
      :border="false"
    />
    <div v-if="active === 1" class="past-title">
      <img src="@/assets/登录失败.png" alt="" />
      <span class="past-span">该数据已失效</span>
      <van-button plain type="info" @click="$router.push('/layout')"
        >返回首页</van-button
      >
    </div>
    <div v-if="active === 2" class="past-title-two">
      <p>
        华信云盛公司要求您(张三) 进行实名认证,
        完成认证后即可查看和签署文件。这和您实名身份不一致。
        如有疑问请联系发件方。
      </p>
      <span>注: 身份信息必须完成一致才能查看和签署文件</span>
      <div @click="$router.push('/layout')">
        前往该账户首页<van-icon name="arrow" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 2
    }
  },
  created() {},
  mounted() {},
  methods: {}
}
</script>

<style scoped lang="less">
.past-due {
  background-color: #f8f8f8;
  height: 100vh;
  .past-bar {
    height: 128px;
    box-sizing: border-box;
    padding-top: 40px;
    /deep/.van-ellipsis {
      font-size: 34px;
      font-weight: bold;
    }
    /deep/.van-icon {
      color: #000;
      font-size: 40px;
    }
  }
  .past-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    img {
      margin: 140px 0 27px 0;
      height: 112px;
      width: 112px;
    }
    .past-span {
      font-size: 26px;
      color: #999999;
    }
    .van-button--normal {
      width: 320px;
      height: 70px;
      margin-top: 650px;
    }
  }
  .past-title-two {
    padding: 0 41px;
    p {
      font-size: 30px;
      color: #666666;
    }
    span {
      font-size: 30px;
      color: #666;
      margin-top: 38px;
    }
    div {
      text-align: center;
      font-size: 30px;
      margin-top: 73px;
      color: #2489f2;
      .van-icon {
        margin-left: 12px;
      }
    }
  }
}
</style>
